<html>

<head>
    <meta charset="utf-8">
    <style>
        html,
        body {
            overflow: hidden;
            margin: 0;
            font-family: "Microsoft YaHei";
        }

        #cv,
        #cv2 {
            position: absolute;
            top: 200px;
            left: calc(50% - 300px);
            z-index: 10;
        }

        #cv2 {
            z-index: 100;
        }

        #btn {
            margin-bottom: 0;
            touch-action: manipulation;
            background-image: none;
            border: 1px solid transparent;
            white-space: nowrap;
            padding: 1px 14px;
            line-height: 1.846153846;
            border-radius: 4px;
            font-weight: 400;
            text-align: center;
            outline: 0;
            border-color: #3598db;
            color: #fff;
            background: #4AA2DF;
            font-size:14px;
            width:90px;
            cursor:pointer;
            display:inline-block;
            vertical-align: bottom;
            height:30px;
        }
        div.form-control{
            width:0;
            transition: all 1s ease;
            overflow:hidden;
            display:inline-block;
            vertical-align: bottom;
        }
        div.form-control input{
            width:calc(100% - 20px);
            vertical-align: middle;
            border: 1px solid rgb(12,12,12);
            border-radius: 2px;
            height:30px;
            line-height:30px;
            font-size:16px;
            padding-left:5px;
        }
        div.form-control.show{
            width:80px;
        }

        .change{
            width:600px;
            height:40px;
            margin-left:calc(50% - 300px);
            margin-top:20px;
            text-align:center;
        }
    </style>
</head>

<body>
    <div class="change">
        <div class="form-control">
            m:<input type="text" >
        </div>
        <div class="form-control">
            n:<input type="text" class="form-control">
        </div>
        <input type="button" value="输入参数" id="btn">
    </div>
    <canvas width="1200" height="1200" id="cv" style="width:600px; height:600px"></canvas>
    <canvas width="1200" height="1200" id="cv2" style="width:600px; height:600px"></canvas>
    <script src="./Lissajous-curve.js"></script>
    <script>
        let s = new Lissajous(document.getElementById('cv'), document.getElementById('cv2'));
        s.draw();

        btn.addEventListener('click',function(e){
            var arr = document.querySelectorAll('div.form-control');
            if (arr[0].className.indexOf('show') == -1){
                arr[0].className  = arr[1].className = 'form-control show';
                this.value="改变形状";
            } else {
                let m = arr[0].firstElementChild.value,
                    n = arr[1].firstElementChild.value;
                if (m && n){
                    s.initRatio(+m, +n);
                }
            }
        })
    </script>
</body>

</html>